﻿<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head> 
    <!-- Add your CSS styles to the following file -->
    <title>Google Powered Site Search App </title>
    <link rel="Stylesheet" type="text/css" href="../Content/styles.css" />
    <!-- Add your JavaScript to the following file -->

    <!-- The following scripts are needed when using the SharePoint object model -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {

            var hostUrl = ""
            if (document.URL.indexOf("?") != -1) {
                var params = document.URL.split("?")[1].split("&");
                for (var i = 0; i < params.length; i++) {
                    p = decodeURIComponent(params[i]);
                    if (/^SPHostUrl=/i.test(p)) {
                        hostUrl = p.split("=")[1];
                       
                        break;
                    }
                }
            }
            if (hostUrl == "") {
                $('#searchSite').hide();
                $('siteNameLabel').hide();
            }

            var config = {
                siteURL: hostUrl,	// Change this to your site
                searchSite: true,
                type: 'web',
                append: false,
                perPage: 8,			// A maximum of 8 is allowed by Google
                page: 0				// The start page
            }

            // The small arrow that marks the active search icon:
            //var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');

            $('ul.icons li').click(function () {
                var el = $(this);

                if (el.hasClass('active')) {
                    // The icon is already active, exit
                    return false;
                }

                el.siblings().removeClass('active');
                el.addClass('active');

                // Move the arrow below this icon
                //arrow.stop().animate({
                //	left		: el.position().left,
                //	marginLeft	: (el.width()/2)-4
                //});

                // Set the search type
                config.type = el.attr('data-searchType');
                $('#more').fadeOut();
            });

            // Adding the site domain as a label for the first radio button:
            $('#siteNameLabel').append(' ' + config.siteURL);

            // Marking the Search tutorialzine.com radio as active:
            $('#searchSite').click();

            // Marking the web search icon as active:
            $('li.web').click();

            // Focusing the input text box:
            $('#s').focus();

            $('#searchForm').submit(function () {
                googleSearch();
                return false;
            });

            $('#searchSite,#searchWeb').change(function () {
                // Listening for a click on one of the radio buttons.
                // config.searchSite is either true or false.

                config.searchSite = this.id == 'searchSite';
            });


            function googleSearch(settings) {

                // If no parameters are supplied to the function,
                // it takes its defaults from the config object above:

                settings = $.extend({}, config, settings);
                settings.term = settings.term || $('#s').val();

                if (settings.searchSite) {
                    // Using the Google site:example.com to limit the search to a
                    // specific domain:
                    settings.term = 'site:' + settings.siteURL + ' ' + settings.term;
                }

                // URL of Google's AJAX search API
                var apiURL = 'https://ajax.googleapis.com/ajax/services/search/' + settings.type + '?v=1.0&callback=?';
                var resultsDiv = $('#resultsDiv');

                $.getJSON(apiURL, { q: settings.term, rsz: settings.perPage, start: settings.page * settings.perPage }, function (r) {

                    var results = r.responseData.results;
                    $('#more').remove();

                    if (results.length) {

                        // If results were returned, add them to a pageContainer div,
                        // after which append them to the #resultsDiv:

                        var pageContainer = $('<div>', { className: 'pageContainer' });

                        for (var i = 0; i < results.length; i++) {
                            // Creating a new result object and firing its toString method:
                            pageContainer.append(new result(results[i]) + '');
                        }

                        if (!settings.append) {
                            // This is executed when running a new search, 
                            // instead of clicking on the More button:
                            resultsDiv.empty();
                        }

                        pageContainer.append('<div class="clear"></div>')
                                     .hide().appendTo(resultsDiv)
                                     .fadeIn('slow');

                        var cursor = r.responseData.cursor;

                        // Checking if there are more pages with results, 
                        // and deciding whether to show the More button:

                        if (+cursor.estimatedResultCount > (settings.page + 1) * settings.perPage) {
                            $('<div>', { id: 'more' }).appendTo(resultsDiv).click(function () {
                                googleSearch({ append: true, page: settings.page + 1 });
                                $(this).fadeOut();
                            });
                        }
                    }
                    else {

                        // No results were found for this search.

                        resultsDiv.empty();
                        $('<p>', { className: 'notFound', html: '<h3>No Results Were Found!</h3>' }).hide().appendTo(resultsDiv).fadeIn();
                    }
                });
            }

            function result(r) {

                // This is class definition. Object of this class are created for
                // each result. The markup is generated by the .toString() method.

                var arr = [];

                // GsearchResultClass is passed by the google API
                switch (r.GsearchResultClass) {

                    case 'GwebSearch':
                        arr = [
                            '<div class="webResult">',
                            '<h2><a href="', r.unescapedUrl, '" target="_blank">', r.title, '</a></h2>',
                            '<p>', r.content, '</p>',
                            '<a href="', r.unescapedUrl, '" target="_blank">', r.visibleUrl, '</a>',
                            '</div>'
                        ];
                        break;
                    case 'GimageSearch':
                        arr = [
                            '<div class="imageResult">',
                            '<a target="_blank" href="', r.unescapedUrl, '" title="', r.titleNoFormatting, '" class="pic" style="width:', r.tbWidth, 'px;height:', r.tbHeight, 'px;">',
                            '<img src="', r.tbUrl, '" width="', r.tbWidth, '" height="', r.tbHeight, '" /></a>',
                            '<div class="clear"></div>', '<a href="', r.originalContextUrl, '" target="_blank">', r.visibleUrl, '</a>',
                            '</div>'
                        ];
                        break;
                    case 'GvideoSearch':
                        arr = [
                            '<div class="imageResult">',
                            '<a target="_blank" href="', r.url, '" title="', r.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">',
                            '<img src="', r.tbUrl, '" width="100%" /></a>',
                            '<div class="clear"></div>', '<a href="', r.originalContextUrl, '" target="_blank">', r.publisher, '</a>',
                            '</div>'
                        ];
                        break;
                    case 'GnewsSearch':
                        arr = [
                            '<div class="webResult">',
                            '<h2><a href="', r.unescapedUrl, '" target="_blank">', r.title, '</a></h2>',
                            '<p>', r.content, '</p>',
                            '<a href="', r.unescapedUrl, '" target="_blank">', r.publisher, '</a>',
                            '</div>'
                        ];
                        break;
                }

                // The toString method.
                this.toString = function () {
                    return arr.join('');
                }
            }


        });

    </script>
</head>

<body>

    <div id="page">


        <div id="gsicon"></div>
        <form id="searchForm" method="post">
            
            <fieldset>

                <input id="s" type="text" />

                <input type="submit" value="Submit" id="submitButton" />

                <div id="searchInContainer">
                    <input type="radio" name="check" value="site" id="searchSite" />
                    <label for="searchSite" id="siteNameLabel">Search</label>

                    <input type="radio" name="check" value="web" id="searchWeb" checked />
                    <label for="searchWeb">Search The Web</label>
                </div>

                <ul class="icons">
                    <li class="web" title="Web Search" data-searchtype="web">Web</li>
                    <li class="images" title="Image Search" data-searchtype="images">Images</li>
                    <li class="news" title="News Search" data-searchtype="news">News</li>
                    <li class="videos" title="Video Search" data-searchtype="video">Videos</li>
                </ul>

            </fieldset>
        </form>

        <div id="resultsDiv"></div>

    </div>

   
    <p class="credit"><a>Powered by Google</a></p>

</body>
</html>
